import { Link } from 'react-router-dom';

function Home() {
  return (
    <div className="h-[calc(100vh-120px)] bg-gradient-to-b from-blue-50 to-white dark:from-gray-900 dark:to-gray-800 flex flex-col justify-center">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* 欢迎区域 */}
        <div className="text-center mb-8">
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-3">
            欢迎来到
            <span className="text-blue-600 dark:text-blue-400 ml-2">FlyProducts</span>
          </h1>
          <p className="text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            这是一个充满爱与温暖的应用，希望能给您带来美好的体验 ❤️
          </p>
        </div>

        {/* 功能卡片区域 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
          {/* 产品展示卡片 */}
          <Link
            to="/products"
            className="group bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 sm:p-6 transition-all duration-300 hover:shadow-xl hover:scale-105"
          >
            <div className="text-blue-500 dark:text-blue-400 text-2xl sm:text-3xl mb-2 sm:mb-4">
              🛍️
            </div>
            <h3 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-1 sm:mb-2">
              浏览产品
            </h3>
            <p className="text-sm sm:text-base text-gray-600 dark:text-gray-300">
              探索我们精心挑选的产品系列，总有一款适合您
            </p>
          </Link>

          {/* 关于我们卡片 */}
          <Link
            to="/about"
            className="group bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 sm:p-6 transition-all duration-300 hover:shadow-xl hover:scale-105"
          >
            <div className="text-blue-500 dark:text-blue-400 text-2xl sm:text-3xl mb-2 sm:mb-4">
              💝
            </div>
            <h3 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-1 sm:mb-2">
              关于我们
            </h3>
            <p className="text-sm sm:text-base text-gray-600 dark:text-gray-300">
              了解我们的故事，以及我们为什么要创建这个充满爱的平台
            </p>
          </Link>

          {/* 联系方式卡片 */}
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 sm:p-6 transition-all duration-300 hover:shadow-xl md:col-span-2 lg:col-span-1">
            <div className="text-blue-500 dark:text-blue-400 text-2xl sm:text-3xl mb-2 sm:mb-4">
              💌
            </div>
            <h3 className="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-1 sm:mb-2">
              联系我们
            </h3>
            <p className="text-sm sm:text-base text-gray-600 dark:text-gray-300">
              有任何问题或建议？随时联系我们，我们很乐意倾听
            </p>
          </div>
        </div>

        {/* 底部装饰 */}
        <div className="mt-8 text-center">
          <div className="inline-flex items-center space-x-2 text-blue-600 dark:text-blue-400">
            <span className="text-xl sm:text-2xl">✨</span>
            <span className="text-base sm:text-lg font-medium">期待与您的相遇</span>
            <span className="text-xl sm:text-2xl">✨</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;
